<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
/*border-radius：给盒子设置圆角
  box-shadow：设置阴影	前两个数值分别设置阴影向右、向下偏移量，后两个设置阴影度
*/		
			.aaa{width: 100px;height: 100px;
				border: solid 2px red;
				
				/* border-radius: 10px 20px 30px 0; */
				/* border-radius:10px 20px 30px 40px/20px 50px 30px 10px; */
				border-radius: 20px 20px 20px 20px/50px 50px 50px 50px;
				
				box-shadow: 20px 40px 10px darkgrey; /*阴影*/
			}
			.box{
				width: 200px;
				height: 200px;
				outline: 1px solid red;
				position: relative;
				overflow: hidden;
				border-radius: 40px/100px;
			}
			.box div{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
			}
			.box .bbb{
				border-radius: 100px/40px;
				background: #ccc;
			}
			
			.box-2{
				width: 180px;
				height: 180px;
				position: relative;
				border-radius: 35%;
				
			}
			.box-2::before{
				content: '';
				position: absolute;
				background: red;
				top: 12px;
				left: 00px;
				width: 182px;
				height: 156px;
				border-top-left-radius: 20px 100px;
				border-top-right-radius: 20px 100px;
				border-bottom-left-radius: 20px 100px;
				border-bottom-right-radius: 20px 100px;
			}
			.box-2::after{
				z-index: 10;
				content: '';
				background: red;
				position: absolute;
				top: 0px;
				left: 12px;
				width: 158px;
				height: 180px;
				border-top-left-radius: 100px 20px;
				border-top-right-radius: 100px 20px;
				border-bottom-left-radius: 100px 20px;
				border-bottom-right-radius: 100px 20px;
			}
			
		</style>
	</head>
	<body>
		<div class="aaa"></div>
		
		<div>
			<div class="box">
				<div class="bbb"></div>
			</div>
		</div>
		
		<div class="box-2">
		</div>
	</body>
</html>
